<%@page import="com.winexpress.order.Wine"%>
<%@page import="com.winexpress.product.Comment"%>
<%@page import="java.util.List"%>
<%@page import="com.winexpress.util.SessionAttributes"%>
<%@taglib prefix="t" tagdir="/WEB-INF/tags" %>

<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>wineXpress online shop</title>  
        <link rel="stylesheet" type="text/css" href="./../star-rating/jquery.rating.css"></link>
        <script language="javascript" type="text/javascript" src="./../star-rating/jquery.rating.js"></script>
    </head>
    <body>
        <t:customerNavigation/>
        <!--starting of the page-->
        <div class="container">
            <div id="fb-root"></div>
            <script>
                window.fbAsyncInit = function() {
                    FB.init({appId: '1551867595039278', status: true, cookie: true,
                        xfbml: true});
                };
                (function() {
                    var e = document.createElement('script');
                    e.async = true;
                    e.src = document.location.protocol +
                            '//connect.facebook.net/en_US/all.js';
                    document.getElementById('fb-root').appendChild(e);
                }());
                (function(d, s, id) {
                    var js, fjs = d.getElementsByTagName(s)[0];
                    if (d.getElementById(id))
                        return;
                    js = d.createElement(s);
                    js.id = id;
                    js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
                    fjs.parentNode.insertBefore(js, fjs);
                }(document, 'script', 'facebook-jssdk'));</script>
            <div class="row">
                <div class="col-lg-12">
                    <h1 class="page-header">Product Details</h1>
                    <ol class="breadcrumb">
                        <li><a href="/WineXpressClient/index.jsp">Home</a></li>
                        <li>Product Details</li>
                    </ol>
                </div>
            </div>

            <div style="width:100%'">        
                <div style="width:100%'">        
                    <form id="search" action="/WineXpressClient/searchManagement/shop" method="post">
                        <div style="float: left; width: 45%;">
                            <select class="form-control" name="seach">
                                <option value="searchByWineName">Wine name</option>
                                <option value="searcyByCategory">Category</option>
                                <option value="searchByCountry">Country</option>
                                <option value="searchByRegion">Region</option>
                                <option value="searchByVarietal">Varietal</option>
                                <option value="searchByVintage">Vintage</option>
                            </select>
                        </div>

                        <div style="float: left; width: 45%; padding-left: 10px; padding-right: 10px;">
                            <input type="text" class="form-control" name="key" placeholder="Enter keywords">
                        </div>
                        <button type="submit" class="btn btn-default" style="width: 10%;">Search</button>
                    </form>
                </div>
            </div>
            <hr/>

            <div name="container1" style="height: 360px;">
                <div name="image" class="col-md-4" style="height: 360px; border: solid 1px #ddd; vertical-align: middle;">
                    <img class="img-responsive" style="margin-left: auto; margin-right: auto; vertical-align: middle; height: 100%;" src="${image}"/>
                </div>
                <div name="description" style="float:left; height: 280px; padding-left: 20px;">
                    <table class="table table-striped table-bordered" style="font-size: 14px;">
                        <tr><td width="150px"><b>Name</b></td><td width="450px">${name}</td></tr>
                        <tr><td><b>Description:</b></td><td>${description}</td></tr>
                        <tr><td><b>Country:</b></td><td>${country}</td></tr>
                        <tr><td><b>Region:</b></td><td>${region}</td></tr>
                        <tr><td><b>Varietal:</b></td><td>${varietal}</td></tr>
                        <tr><td><b>Vintage:</b></td><td>${vintage}</td></tr>
                        <tr><td><b>Volume:</b></td><td>${volume}</td></tr>
                        <tr><td><b>Price:</b></td><td>
                                <% double discount = Double.parseDouble(request.getAttribute("discount").toString()); %>
                                <% double discountedPrice = (100 - Double.parseDouble(request.getAttribute("discount").toString())) * Double.parseDouble(request.getAttribute("price").toString()) / 100;%>
                                <%
                                    if (discount == 0)
                                        out.print("S$" + request.getAttribute("price"));
                                    else {
                                %>
                                <del>S$${price}</del> &nbsp; <b style="color: red;">S$<%out.print(discountedPrice);%></b>
                                <%}%>
                            </td>
                        </tr>
                        <tr><td colspan="2" align="left" style="vertical-align: middle;"><form action="/WineXpressClient/products/productDetail"><b>Qty: </b><input name="qty" id="qty" size="13" value="1" style="text-align: right"/><input name="id" id="id" type="hidden" value="${wid}"/><input name="addtocart" id="addtocart" type="hidden" value="1"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="image" src="/WineXpressClient/resources/images/addtocart.png" width="135" height="30" style="vertical-align: middle" name="submit"/></form></td></tr>
                    </table>                
                </div>
                <div name="share" style="border-color: transparent; float:left; width: 36px; height: 100%; margin-left: 20px;">
                    <div>
                        <div class="fb-share-button" data-href="https://www.winexpress6.tk/WineXpressClient/products/productDetail?id=${wid}" data-type="button_count"></div>
                        &nbsp;
                    </div>
                    <div>
                        <div class="g-plus" data-action="share" data-annotation="bubble" data-href="https://www.winexpress6.tk/WineXpressClient/products/productDetail?id=${wid}"></div>
                        &nbsp;
                        <script type="text/javascript">
                            (function() {
                                var po = document.createElement('script');
                                po.type = 'text/javascript';
                                po.async = true;
                                po.src = 'https://apis.google.com/js/platform.js';
                                var s = document.getElementsByTagName('script')[0];
                                s.parentNode.insertBefore(po, s);
                            })();
                        </script>
                    </div>
                    <div>
                        <a href="https://twitter.com/share" class="twitter-share-button" data-url="https://www.winexpress6.tk/WineXpressClient/products/productDetail?id=${wid}" data-via="WineXpress1" data-text="Have a look at this product!" data-lang="en">Tweet</a>
                        &nbsp;
                        <script>!function(d, s, id) {
                                var js, fjs = d.getElementsByTagName(s)[0];
                                if (!d.getElementById(id)) {
                                    js = d.createElement(s);
                                    js.id = id;
                                    js.src = "https://platform.twitter.com/widgets.js";
                                    fjs.parentNode.insertBefore(js, fjs);
                                }
                            }(document, "script", "twitter-wjs");</script>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12">
                </div>
                <div class="col-lg-12">
                    <hr/>
                    <h4 class="page-header">Products You May Interest</h4>  
                </div>
                <div class="row">
                </div>
                <%  List<Wine> list = (List) session.getAttribute("bestSellersList");%>
                <% if ((list != null) && (!list.isEmpty())) {
                        for (Object o : list) {
                            Wine w = (Wine) o;%>
                <div class="col-lg-3 col-md-3 col-sm-3" style="border: solid 1px #ddd; margin-left: 5%; text-align: center;">
                    <a href="/WineXpressClient/products/productDetail?id=<%=w.getId()%>"><img class="img-responsive img-home-portfolio" class="img-responsive" style="margin-left: auto; margin-right: auto; vertical-align: middle;" src="<%=w.getImageUrl()%>"></a>
                    <a href="/WineXpressClient/products/productDetail?id=<%=w.getId()%>"><%=w.getName()%></a>
                </div>
                <%}
                    } else if (list == null) {%>
                <h5>Please check this place later!</h5>
                <% } %>
            </div>
            <br/>
            

            <div style="height: 130px;">
                <p class="bg-info" style="font-size: 20px; text-align: center;">Product Rating</p>
                <div style="height:70px;">
                    <form action="/WineXpressClient/products/productDetail" method="POST">
                        <input name="star" id="star" type="radio" value="1" title="1" class="hover-star">
                        <input name="star" id="star" type="radio" value="2" title="2"      class="hover-star"/>
                        <input name="star" id="star" type="radio" value="3" title="3"        class="hover-star"/>
                        <input name="star" id="star" type="radio" value="4" title="4"      class="hover-star"/>
                        <input name="star" id="star" type="radio" value="5" title="5" class="hover-star"/>
                        <input name="id" id="id" type="hidden" value="${wid}"/>
                        <span id="hover-test"></span>
                        <br/>
                        <input type="submit" value="Submit Your Rating!"></input>
                    </form>
                </div>
                <div style="float: start; height: 70px;">
                    Average Score bases on previous users' rating: &nbsp;
                    <b>${average}</b>
                </div>
                <script>
                    $(function() {
                        $('.hover-star').rating({
                            focus: function(value, link) {
                                var tip = $('#hover-test');
                                tip[0].data = tip[0].data || tip.html();
                                tip.html(link.title || 'value: ' + value);
                            },
                            blur: function(value, link) {
                                var tip = $('#hover-test');
                                $('#hover-test').html(tip[0].data || '');
                            }
                        });
                    })
                            ;
                </script>
            </div>

            <div style="height: 200px; padding-top: 20px;">
                <div style="alignment-adjust: central">
                    <div class="fb-comments" data-href="https://www.winexpress6.tk/WineXpressClient/products/productDetail?id=${wid}" data-numposts="5" data-colorscheme="light"></div>
                </div>
            </div>

            <div style="height: 200px; padding-top: 20px;">
                <p class="bg-info" style="font-size: 20px; text-align: center;">Leave Comments</p>
                <form>
                    <textarea class="form-control" id="userinput" name="userinput" rows="3"></textarea>
                    <input name="comment" id="comment" type="hidden" value="1"/>
                    <input name="id"      id="id"      type="hidden" value="${wid}"/><br/>
                    <input type="submit" value="Submit Your Comment"/>
                </form>
            </div>

            <div>
                <p class="bg-info" style="font-size: 20px; text-align: center;">Previous Comments</p>
                <% List<Comment> commentList = (List<Comment>) request.getAttribute("commentsObj"); %>
                <% for (Comment s : commentList) { %>            
                <i><%out.println(s.getUid().getFirstName());%> comments on <%out.println(s.getCommentDate().getDay());%>- <%out.println(s.getCommentDate().getMonth());%>- <%out.println(s.getCommentDate().getYear());%></i><br/>
                <%out.println(s.getComment());%>
                <hr/>
                <%}%>
            </div>
        </div>
        <script>
            if (${alert1} == "1")
                alert("Rating recorded");
        </script>
        <script>
            if (${alert2} == "1")
                alert("Please login before rating.");
        </script>
        <script>
            if (${alert3} == "1")
                alert("Comment Recorded");
        </script>
        <script>
            if (${alert4} == "1")
                alert("Please login before comment.");
        </script>
        <script>
            if (${alert5} == "1")
                alert("Item added to cart!");
        </script>
        <div class="fb-recommendations-bar" data-site="winexpress6.tk" href="https://www.winexpress6.tk" data-read-time="2" data-side="right" data-action="recommend"></div>
        <t:footer/>
    </body>
</html>